<template>
  <view class="review-container mx-[30rpx]">
    <view class="text-[#333333] text-[30rpx] py-[20rpx]">热门评论</view>
    <template v-for="(item, index) in 3" :key="index">
      <view
        class="review-item pt-[7rpx] pb-[30rpx] mb-[20rpx] box-border"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="flex flex-row items-center">
          <view class="w-[98rpx] mr-[20rpx]">
            <image
              :src="item.videoAvatar"
              mode="aspectFit"
              class="w-[98rpx] h-[98rpx] rounded-[50%]"
            />
          </view>
          <view class="grow flex flex-col justify-around">
            <view class="text-[#222222] text-[32rpx]">张三</view>
            <view class="text-[#666666] text-[24rpx] mt-[5rpx]">{{
              item.collectTime
            }}</view>
          </view>
        </view>
        <view class="text-[#333333] text-[28rpx] ml-[118rpx]">
          {{ item.videoContent ? item.videoContent : "此用户默认好评" }}
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

const list = reactive([
  {
    collectTime: "2025年2月14日",
    videoTitle: "这是一个视频标题",
    videoContent: "直播效果好，让我们切身实地的感受到了巡回审判法庭的温度",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
  },
  {
    collectTime: "2025年2月14日",
    videoTitle: "这是一个视频标题",
    videoContent: "",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
  },
]);
</script>

<style lang="scss" scoped>
.review-container {
  .review-item {
    border-bottom: 1rpx solid #e8e9ec;
  }
  .review-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
}
</style>
